<template>
  <div class="list-common-table">
    <t-space>
      <t-row :gutter="16">
        <t-col :span="6">
          <t-select
            v-model="searchModel.datasourceId"
            placeholder="请选择数据源"
            :options="datasources"
            :keys="{
              value: 'id',
              label: 'name',
            }"
          />
        </t-col>
        <t-col :span="6">
          <t-button @click="configDatasource">
            <template #icon><setting-icon /></template>
            数据源配置
          </t-button>
        </t-col>
      </t-row>
      <t-row :gutter="16">
        <t-col :span="6">
          <t-input v-model="searchModel.tableName" placeholder="请输入表名" />
        </t-col>

        <t-col :span="6" class="operation-container">
          <t-button theme="primary" @click="search">
            <template #icon>
              <search-icon />
            </template>
            查询
          </t-button>
          <t-button theme="default" @click="reset">
            <template #icon><rollback-icon /></template>
            重置
          </t-button>
        </t-col>
      </t-row>
    </t-space>
    <div class="table-container">
      <t-table :data="renderData" :columns="columns" row-key="id" :hover="true" :loading="loading" size="small">
        <template #operations="{ row }">
          <t-space>
            <t-button variant="text" size="small" theme="primary" @click="gen(row)">
              <template #icon>
                <setting1-icon />
              </template>
              生成代码
            </t-button>
          </t-space>
        </template>
      </t-table>
    </div>
    <ds-list v-model:visible="dsDialogVisible" />
    <gen-form v-model:visible="genDialogVisible" :form-data="formData" />
  </div>
</template>
<script setup lang="ts">
import { pickBy } from 'lodash';
import { RollbackIcon, SearchIcon, Setting1Icon, SettingIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { computed, ref } from 'vue';
import { useRequest } from 'vue-request';

import { datasourceList, tableList } from '@/api/upms/gen';

import DsList from './components/ds-list.vue';
import GenForm from './components/gen-form.vue';

// 初始数据
const generateModel = () => {
  return {
    datasourceId: '',
    tableName: '',
  };
};

const searchModel = ref(generateModel());

const reset = () => {
  searchModel.value = generateModel();
};

const dsDialogVisible = ref(false);

const genDialogVisible = ref(false);

const configDatasource = () => {
  dsDialogVisible.value = true;
};

const columns = [
  { title: '表名', colKey: 'tableName' },
  { title: '数据库名称', colKey: 'tableSchema' },
  { title: '描述', colKey: 'tableComment' },
  { title: '创建时间', colKey: 'createTime' },
  { title: '操作', colKey: 'operations' },
];

const { data, loading, refresh } = useRequest(() => tableList({ ...pickBy(searchModel.value) }), { manual: true });

const { data: datasources } = useRequest(datasourceList);

const renderData = computed(() => data.value || []);

const formData = ref();

const search = () => {
  if (!searchModel.value.datasourceId) {
    MessagePlugin.warning('请选择数据源');
  } else {
    refresh();
  }
};

const gen = (row: any) => {
  genDialogVisible.value = true;
  formData.value = row;
  formData.value.datasourceId = searchModel.value.datasourceId;
};
</script>

<style lang="less" scoped>
.list-common-table {
  background-color: var(--td-bg-color-container);
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
  border-radius: var(--td-radius-medium);

  .table-container {
    margin-top: var(--td-comp-margin-xxl);
  }
}

.form-item-content {
  width: 100%;
}

.operation-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .expand {
    .t-button__text {
      display: flex;
      align-items: center;
    }
  }
}

.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: var(--td-comp-margin-s);
  }
}
</style>
